
.cart-page {
    background-color: #f5f5f5;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    &.has{
      padding-bottom: 100rpx;
      padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
    }
    @include flex(column);
    .editTitle{
      font-size: 30rpx;
      padding:0 27rpx;
    }
    .cart_content{
        @include sub-item(1, column);
        .emptyBox {
            padding: 100rpx 20rpx 60rpx 20rpx;
            margin-top: 0;
            margin-bottom: 40rpx;
            background-color: #fff;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            align-items: center;
            display: flex;
            flex-direction: column;
            .decorate {
                font-size: 26rpx;
                color: #999;
            }
            .empty_image {
               width: 180rpx;
               height: 130rpx;
               margin: 0 auto 20rpx;
            }
            .toHome {
              width: 160rpx;
              height: 55rpx;
              background: #fff;
              border: 1px solid #000;
              line-height: 55rpx;
              margin: 40rpx auto;
              font-size: 28rpx;
              color: #000;
              text-align: center;
            }
        }
        .moreProduct{
            background-color: #f5f5f5;
            .decotate {
                text-align: center;
                margin: 22rpx 0 42rpx 0;
                .decorete_text {
                  color: #000;
                  font-size: 34rpx;
                  font-weight: 400;
                }
                .decorete_text_en {
                  color: #666;
                  font-size: 26rpx;
                  font-weight: 400;
                  margin-top: 26rpx;
                }
            }
        }
        .shoppingCart {
            .product-all {
                padding-bottom:20rpx;
                .title{
                  min-height: 80rpx;
                  overflow: hidden;
                  background-color: #fff;
                  display: flex;
                  justify-content: space-between;
                  border-bottom: 1rpx solid #efefef;
                  font-size: 32rpx;
                  padding: 0 15px;
                  .titleLeft{
                    font-size: 28rpx;
                    color: #000;
                    display: flex;
                    align-items: center;
                  }
                  .titleRight{
                    display: flex;
                    align-items: center;
                    .o-span{
                      font-size: 24rpx;
                      margin: 0 20rpx;
                      color: #666;
                    }
                    image{
                      width: 32rpx;
                      height: 32rpx;
                    }
                  }
                }
                .cartItem{
                  margin-bottom:20rpx;
                  // border-radius: 20rpx;
                  overflow: hidden;
                  .product-info {
                    position: relative;
                    padding: 30rpx;
                    // height: 200rpx;
                    box-sizing: border-box;
                    background-color: #fff;
                    width: 100%;
                    .product-check{
                      width: 40rpx;
                      height: 40rpx;
                      position: absolute;
                      padding: 20rpx;
                      left: 10rpx;
                      top: 70rpx;
                      .o-span{
                        display: block;
                        width: 36rpx;
                        height: 36rpx;
                        margin: 2rpx;
                        background-image: url("~@/static/images/cart/icon_marquee_n.png");
                        background-size: 100% 100%;
                      }
                      .checked{
                        background-image: url("~@/static/images/cart/icon_marquee_selected_n.png");
                      }
                      .disable{
                        background-image: none;
                      }
                    }
                    .product-box {
                      padding-left: 60rpx;
                      display: flex;
                      .product-img {
                          height: 200rpx;
                          width: 200rpx;
                          position: relative;
                          margin-right: 20rpx;
                          .img-item{
                            width: 200rpx;
                            height: 200rpx;
                            object-fit: cover;
                            border: 1rpx solid $color-border;
                            box-sizing: border-box;
                          }
                          .maskIm{
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 200rpx;
                            height: 200rpx;
                            .masImg{
                              width: 100rpx;
                              height: 100rpx;
                              border: none;
                              margin: 50rpx;
                            }
                          }
                      }
                      .product-intro {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .goodsTitle {
                          color: #000;
                          line-height: 36rpx;
                          max-height: 72rpx;
                          overflow : hidden;
                          text-overflow: ellipsis;
                          font-size: 28rpx;
                          display: -webkit-box;
                          -webkit-line-clamp: 2;
                          -webkit-box-orient: vertical;
                          word-break: break-all;
                          .o-span{
                            width: 60rpx;
                            height: 28rpx;
                            border: 1px solid #000;
                            border-radius: 5px;
                            background-color: #fff;
                            padding:0 10rpx;
                            font-size: 22rpx;
                            transform: scale(0.8);
                            margin-right: 10rpx;
                          }
                          .blueTitle{
                            color: #4D88FF;
                            border: 1rpx solid #4D88FF;
                          }
                        }
                        .proper{
                          display: flex;
                          padding-top: 23rpx;
                          .o-span {
                            color: #999999;
                            font-size: 24rpx;
                            padding-right: 16rpx;
                          }
                        }
                        .price {
                          font-weight: normal;
                          // color: #ff3939;
                          color: #000;
                        }
                        .deletePrice{
                          color: #999 !important;
                          text-decoration: line-through;
                        }
                        .num {
                          font-size: 20rpx;
                          color: #000;
                        }
                        .bottom-price {
                          @include flex;
                          @include j-between;
                          width: 408rpx;
                        }
                      }
                    }
                    .clicks {
                      position: absolute;
                      right: 32rpx;
                      bottom: 32rpx;
                    }
                  }
                }
            }
        }
    }
    .bor-bot {
      border-bottom: 1px solid #F5F5F5;
    }
    .bottomFix {
      z-index: 9;
      position: fixed;
      bottom: 0;
      padding-bottom: 0rpx;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      width: 100%;
      background-color: #fff;
      left: 0;
      height: 100rpx;
      box-shadow: 0 -1rpx 15rpx #eaeaea;
      .bottom-container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 10rpx 20rpx;
        line-height: 80rpx;
        .select-all{
          flex: 0 0 120rpx;
          display: flex;
          align-items: center;
          .o-span{
            margin: 10rpx;
            width: 34rpx;
            height: 34rpx;
            background-image: url("~@/static/images/cart/icon_marquee_n.png");
            background-size: 100% 100%;
          }
          .checked{
            background-image: url("~@/static/images/cart/icon_marquee_selected_n.png");
            background-size: 100% 100%;
          }
        }
        .bottom-right{
          display: flex;
          flex-direction: row-reverse;
          flex: 1;
          align-items: center;
          justify-content: right;
          .lPrice{
            margin-right: 10px;
            .totalPrice{
              font-weight: normal;
              color: #000;
              font-size: 38rpx;
              // color: $color-price;
            }
          }
          .priceSign:before{
            content: '￥';
            font-size: 24rpx
          }
          .rButton{
            flex: 0 0 200rpx;
            color: white;
            height: 70rpx;
            line-height: 70rpx;
            // border-radius: 34rpx;
            // background-color: #FF759F;
            background-color: #000;
            text-align: center;
          }
          .blur{
            background-color: #999;
          }
        }
      }
    }
    .full-cut-icon {
      display: flex;
      align-items: center;
      min-height:64rpx;
      padding: 10rpx 20rpx;
      background: #fff;
      justify-content: space-between;
      .full-cut-tag {
        height:30rpx;
        border:1px solid rgba(226,21,54,1);
        border-radius:5rpx;
        line-height: 30rpx;
        color: rgba(226,21,54,1);
        padding:0 4rpx;
        flex-shrink: 0;
        font-size: 24rpx;
      }
      .full-cut-content {
        flex: 1;
        padding: 0 10rpx;
        @include text-ellipsis-line;
        line-height: 30rpx;
        font-size: 26rpx;
        .div-class {
          color: #000;
          font-weight: 500;
          line-height: 40rpx;
          height: 40rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          span { color: #CF152F }
        }
      }
      .full-cut-btn {
        flex-shrink: 0;
        font-size: 24rpx;
        color: #CF152F;
      }
      .red-icon {
        margin-left: 6rpx;
        width:20rpx;
        height: 20rpx;
        vertical-align: middle;
      }
    }
    .base-stepper {
      // border-radius: 0;
      // .icon {
      //   background-color: #f5f5f5;
      //   color: #000;
      //   font-weight: 600;
      // }
      // .input {
      //   background-color: #fff;
      //   font-size:30rpx;
      //   color:rgba(0,0,0,1);
      // }
    }
}